<template>
	<view>
		<view class="modify">
			<!-- 导航栏 -->
			<u-navbar
			            title="设置昵称"
						left-text="返回"
						@leftClick="leftClick"
			            :autoBack="true"
						placeholder="true"
						class="navr"
			        >
			</u-navbar>
			<view class="zhanwei"></view>
			<!-- 修改昵称 -->
			<view class="info">
				<text>昵称</text>
				<input type="text"
				:value="user_name"
				@input="modifyName"
				class="nichen"/>
			</view>
			<text class="rules">长度12/18字符</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_name:'',
				changed_name:'',
			}
		},
		onLoad(){
			this.user_name = getApp().globalData.wxName
		},
		methods: {
			// 修改昵称
			modifyName(e){
				this.changed_name = e.detail.value
			},
			
			leftClick() {
			    getApp().globalData.wxName = this.changed_name;
				console.log(getApp().globalData.wxName)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modify{
		width: 100%;
		height: 1500rpx;
		background-color: rgb(249,249,249);
		.zhanwei{
			width: 100%;
			height: 50rpx;
		}
		.info{
			width: 100%;
			height: 100rpx;
			background-color: rgb(255,255,255);
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			text{
				font-size: 32rpx;
				font-family: "微软雅黑";
				font-weight: 600;
				margin-left: 40rpx;
			}
			.nichen{
				width: 60%;
				height: 100%;
				line-height: 100%;
				margin-right: 40rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgb(107, 107, 107);
				text-align: right;
			}
		}
		.rules{
			font-size: 26rpx;
			color: rgb(173, 173, 173);
			float: right;
			margin-right: 40rpx;
			margin-top: 20rpx;
		}
	}
</style>
